<!--
 * @Author: feng.gan 675198494@qq.com
 * @Date: 2025-06-12 09:14:53
 * @LastEditors: feng.gan 675198494@qq.com
 * @LastEditTime: 2025-06-12 14:41:43
 * @FilePath: \video-player\popup.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频播放器</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 简化版的Font Awesome图标 */
        .fas {
            font-family: Arial, sans-serif;
        }
        .fa-play:before { content: "▶"; }
        .fa-pause:before { content: "⏸"; }
        .fa-volume-up:before { content: "🔊"; }
        .fa-volume-down:before { content: "🔉"; }
        .fa-volume-mute:before { content: "🔇"; }
        .fa-expand:before { content: "⤢"; }
        .fa-folder-open:before { content: "📂"; }
    </style>
    <script src="lib/hls.min.js"></script>
</head>
<body class="popupBody">
    <div class="container">
        <h2>视频播放器</h2>
        <div class="video-input">
            <div class="url-input">
                <input type="text" id="videoUrl" placeholder="请输入视频URL">
                <button id="playButton">播放</button>
            </div>
            <div class="file-input">
                <button id="localFileBtn" class="secondary-btn">
                    <i class="fas fa-folder-open"></i> 选择本地文件
                </button>
                <input type="file" id="fileInput" accept="video/*,.m3u8" style="display: none;">
                <span id="fileName" class="file-name"></span>
            </div>
        </div>
        <div class="video-container">
            <video id="videoPlayer" controls>
                您的浏览器不支持 HTML5 视频播放。
            </video>
            <div class="custom-controls">
                <div class="control-bar">
                    <button id="playPauseBtn" class="control-btn">
                        <i class="fas fa-play"></i>
                    </button>
                    <div class="progress-container">
                        <div id="progressBar" class="progress-bar">
                            <div id="progressFill"></div>
                        </div>
                        <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
                    </div>
                    <div class="volume-container">
                        <button id="muteBtn" class="control-btn">
                            <i class="fas fa-volume-up"></i>
                        </button>
                        <input type="range" id="volumeSlider" min="0" max="100" value="100">
                    </div>
                    <button id="fullscreenBtn" class="control-btn">
                        <i class="fas fa-expand"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="format-selector">
            <label>视频格式：</label>
            <select id="formatSelector">
                <option value="mp4">MP4</option>
                <option value="m3u8">M3U8</option>
            </select>
            <div class="playback-speed">
                <label>播放速度：</label>
                <select id="speedSelector">
                    <option value="0.5">0.5x</option>
                    <option value="1.0" selected>1.0x</option>
                    <option value="1.5">1.5x</option>
                    <option value="2.0">2.0x</option>
                </select>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html> 